<include file="layout/header" />
<style type="text/css">
	.titleBox label:hover input[type=checkbox].checkbox+span:before{
		border-color:red;
	}
	.titleBox label input[type=checkbox].checkbox:checked+span:before{
		color:red;
	}
</style>
<div id="content">

	<div class="row">
		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
			<h1 class="page-title txt-color-blueDark"><i class="fa fa-desktop fa-fw "></i> 
				权限管理 
			</h1>
		</div>
	</div>
	
	<!-- widget grid -->
	<section id="widget-grid" class="">
		<!-- row -->
		<div class="row">
			<!-- NEW WIDGET START -->
			<article class="col-sm-12">
				<!-- Widget ID (each widget will need unique ID)-->
				<div class="jarviswidget well" id="wid-id-0">
					<!-- end widget edit box -->

					<!-- widget content -->
					<div class="widget-body">
						
						<div class="row">

							<div class="col-sm-6 col-lg-8">

								<h6>菜单列表</h6>
								<form action="{{:url('manage/Group/addPer')}}" method='post'>
									<div class="dd" id="nestable3">
										<ol class="dd-list">
											<volist name='data' id='vo'>
												<li class="dd-item dd3-item listBox" data-id="{{$vo.id}}">
													<div class="dd-handle dd3-handle">
														Drag
													</div>
													<div class="dd3-content">
														{{$vo.title}}
														<div class="pull-right">
															<div class="checkbox no-margin titleBox">
																<label>
																	<if condition="in_array($vo['id'],$mid)">
																		<input type="checkbox" class="checkbox style-0" name='mid[]' checked="checkbox" value="{{$vo.id}}">
																	<else />
																		<input type="checkbox" class="checkbox style-0" name='mid[]' value="{{$vo.id}}">
																	</if>
																  	
																  <span class="font-xs"></span>
																</label>
															</div>
														</div>
													</div>
													<volist name="$vo['child']" id='_v'>
														<ol class="dd-list listInp">
															<li class="dd-item dd3-item" data-id="{{$_v.id}}">
																<div class="dd-handle dd3-handle">
																	Drag
																</div>
																<div class="dd3-content">
																	{{$_v.title}}
																	<div class="pull-right">
																		<div class="checkbox no-margin list">
																			<label>
																			  <if condition="in_array($_v['id'],$mid)">
																			  	<input type="checkbox" class="checkbox style-0" name='mid[]' checked="checkbox" value="{{$_v.id}}">
																			  <else />
																			  	<input type="checkbox" class="checkbox style-0" name='mid[]' value="{{$_v.id}}">
																			  </if>

																			  <span class="font-xs"></span>
																			</label>
																		</div>
																	</div>
																</div>
															</li>
														</ol>
													</volist>
												</li>
											</volist>
										</ol>
										<div class="table-responsive">
										<input type="hidden" name="gid" value="{{$gid}}">
										<button class="btn btn-danger" style="float: right;" type="submit"><i class="fa fa-remove"></i> 提交</button>
										</div>
									</div>
								</form>
							</div>

						</div>

					</div>
					<!-- end widget content -->
				</div>
				<!-- end widget -->
			</article>
			<!-- WIDGET END -->
		</div>
		<!-- end row -->
	</section>
	<!-- end widget grid -->

</div>
<include file="layout/footer" />
<script type="text/javascript">

// DO NOT REMOVE : GLOBAL FUNCTIONS!

$(document).ready(function() {
	
	pageSetUp();
	

	$('#nestable-menu').on('click', function(e) {
		var target = $(e.target), action = target.data('action');
		if (action === 'expand-all') {
			$('.dd').nestable('expandAll');
		}
		if (action === 'collapse-all') {
			$('.dd').nestable('collapseAll');
		}
	});

	$('#nestable3').nestable();

	$("body").on("change",".titleBox input",function(){
		if($(this).prop("checked") == true){
			$(this).parents(".dd3-content").siblings(".listInp").find("input").prop("checked",true);
		}else{
			$(this).parents(".dd3-content").siblings(".listInp").find("input").prop("checked",false);
		}
	})
	$("body").on("change",".list input",function(){
		var len = $(this).parents(".listBox").find("ol.listInp input:checked").length
		if(len > 0){
			$(this).parents(".listBox").find(".titleBox input").prop("checked",true);
		}else{
			$(this).parents(".listBox").find(".titleBox input").prop("checked",false);
		}
	})











})

</script>